<template>
  <div class="partition-card">
    <div class="partition-card-head">
      <div class="partition-card-head-left">
        <!-- <SvgIcon iconClass="logo" class="partition-icon"></SvgIcon> -->
        <!-- <router-link to="/partition" class="name" target="_blank" style="margin-left:10px"> -->
         <div class="name" style="margin-left: 10px;"> {{ partitionName }}</div>
          <!-- </router-link> -->
      </div>
      <div class="partition-card-head-right">
        <el-button
          size="mini"
          icon="el-icon-refresh-left"
          @click="queryPartitionRecommendVideoList(pid)"
          >换一换</el-button
        >
        <!-- <el-button size="mini" @click="morePartitionVideos(pid)"
          >更多 ></el-button
        > -->
      </div>
    </div>
    <div class="partition-card-body">
      <VideoCard
        v-for="item in recommendVideoList"
        :key="item.id"
        :videoObj="item"
        style="width: 14vw; height: 50%;"
      ></VideoCard>
    </div>
  </div>
</template>
<script>
import { partitionRecommendVideoList } from "@/api/home.js";
import VideoCard from "@/components/video/VideoCard.vue";
export default {
  components: { VideoCard },
  props: {
    pid: {
      type: String
    },
    partitionName: {
      type: String
    }
  },
  data() {
    return {
      queryParam: {
        pageNum: 1,
        pageSize: 8,
      },
      recommendVideoList: [],
    };
  },
  mounted() {
    this.queryPartitionRecommendVideoList(this.pid);
  },
  methods: {
    queryPartitionRecommendVideoList(pid) {
      partitionRecommendVideoList(
        pid,
        this.queryParam.pageNum,
        this.queryParam.pageSize
      ).then((res) => {
        this.recommendVideoList = res.data;
      });
    },
    // morePartitionVideos(pid) {
    //   // todo 到更多视频页
    //   let url = this.$router.resolve({
    //     name: "video",
    //     params: {
    //       pid: pid,
    //     },
    //   });
    //   window.open(url.href, "_blank");
    // },
  },
};
</script>
<style lang="scss" scoped>
.partition-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  height: 36px;
}
.partition-card-head-left {
  display: inline-flex;
  align-items: center;
}
.partition-icon {
  margin-right: 6px;
  width: 36px;
  height: 36px;
  vertical-align: middle;
}
.partition-card-body {
  display: flex;
  align-content: space-between;
  flex-wrap: wrap;
  justify-content: space-between;
  height: 480px;
}
</style>